<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>添加账号</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-tabs v-model="active_tab" @tab-click="tab_click">
                <el-tab-pane label="分类添加" name="category">
                    <el-row>
                        <el-col :span="6" style="margin-right: 10px;">
                            <el-input v-model="keyword" placeholder="昵称丶原始ID">
                                <el-button @click="get_list()" slot="append">搜索</el-button>
                            </el-input>
                        </el-col>
                        <el-col :span="15">
                            <el-select v-model="category_1st_id" clearable filterable placeholder="一级分类"
                                       @change="category_1st_change">
                                <el-option v-for="item in category_1st_list" :key="item.id" :label="item.categoryname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="category_2nd_id" clearable filterable placeholder="二级分类"
                                       @change="category_2nd_change">
                                <el-option v-for="item in category_2nd_list" :key="item.id" :label="item.categoryname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-button @click="add_by_category()" type="primary">添加</el-button>
                        </el-col>
                        <el-col>
                            <el-table :data="table_data" border stripe style="margin-top: 10px;"
                                      @selection-change="selection_change">
                                <el-table-column type="selection" width="120" label="全选"></el-table-column>
                                <el-table-column prop="name" label="账号昵称" width="220"></el-table-column>
                                <el-table-column prop="ghid" label="原始id" width="220"></el-table-column>
                                <el-table-column prop="category" label="一级分类" width="180"></el-table-column>
                                <el-table-column prop="category2" label="二级分类" width="180"></el-table-column>
                            </el-table>
                            <div style="text-align: center; margin-top: 10px;">
                                <el-pagination background layout="total, prev, pager, next" :total="total"
                                               :page-size="pagesize" @current-change="current_change"></el-pagination>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="原始id添加" name="ghid">
                    <h3 style="margin: 20px 0;">请填写要绑定的微信公众号原始id</h3>
                    <el-input label="请填写要绑定的微信公众号原始id" type="textarea" :autosize="{ minRows: 20, maxRows: 70}"
                              placeholder="每个ID请用英文逗号(,)分隔" v-model="ghid_textarea"></el-input>
                    <label style="color: red; margin: 20px 0;">每个ID请用英文逗号(,)分隔</label>
                    <el-row>
                        <el-button @click="add_by_ghid()" type="primary">添加</el-button>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            keyword: '', // 搜索关键字
            category_1st_id: '', // 一级分类id
            category_2nd_id: '', // 二级分类id
            category_1st_list: [], // 所有一级分类
            category_2nd_list: [], // 属于一级分类的二级分类
            active_tab: 'category', // 当前tab标签
            table_data: [], // 表格数据
            ghid_list: [], // 选中的ghid列表
            ghid_textarea: '', // ghids 字符串
            pagesize: 10, // 每页展示的数量
            total: 0, // 数据总数
            page: 1, // 当前页码
        },
        methods: {
            // tab切换
            tab_click(tab) {
                if (tab.index == 0) {
                    this.page = 1;
                    this.keyword = '';
                    this.category_1st_id = '';
                    this.category_2nd_id = '';
                    this.get_category();
                    this.get_list();
                }
            },
            // 一级分类选择
            category_1st_change(val) {
                this.get_category(val);
                this.category_1st_id = val;
                this.get_list();
            },
            // 二级分类选择
            category_2nd_change(val) {
                this.category_2nd_id = val;
                this.get_list();
            },
            // 获取分类
            get_category(pid = 0) {
                var that = this;
                $.ajax({
                    type: 'get',
                    cache: false,
                    url: '{:url("categorys/get")}' + '?pid=' + pid,
                    success: function (res) {
                        if (pid) {
                            that.category_2nd_list = res;
                        } else {
                            that.category_1st_list = res;
                        }
                    },
                    error: function () {
                        layerAlert('获取分类失败,请刷新重试');
                    }
                })
            },
            // 处理多选
            selection_change(val) {
                arr = [];
                val.forEach(function (item) {
                    arr.push(item.ghid);
                });
                this.ghid_list = arr;
            },
            // 获取公众号数据
            get_list() {
                var that = this;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{:url("fans.collect/get_without_acc")}',
                    data: {
                        page: that.page,
                        keyword: that.keyword,
                        category: that.category_1st_id,
                        category2: that.category_2nd_id
                    },
                    success: function (res) {
                        if (res) {
                            that.table_data = res.list;
                            that.total = res.total;
                        }
                    },
                    error: function () {
                        layerAlert('获取账号列表失败,请刷新重试');
                    }
                });
            },
            // 页码切换
            current_change(page) {
                this.page = page;
                this.get_list();
            },
            // 按分类绑定
            add_by_category() {
                var that = this;
                if (that.ghid_list.length) {
                    $.ajax({
                        type: 'post',
                        cache: false,
                        url: '{:url("fans.collect/add_acc_by_category")}',
                        data: {ghid_list: that.ghid_list},
                        success: function (res) {
                            if (res) {
                                layerAlert('成功添加' + res + '个账号', function () {
                                    layerParentClose();
                                    parent.window.location.reload();
                                })
                            } else {
                                layerAlert('添加失败');
                            }
                        },
                        error: function () {
                            layerAlert('发生系统错误,请与管理员联系！');
                        }
                    });
                } else {
                    that.$message.error('至少选择一个账号');
                }
            },
            // 按原始id绑定
            add_by_ghid() {
                var that = this;
                if (that.ghid_textarea) {
                    $.ajax({
                        type: 'post',
                        cache: false,
                        url: '{:url("fans.collect/add_acc_by_ghid")}',
                        data: {ghid_list: that.ghid_textarea},
                        success: function (res) {
                            if (res) {
                                layerAlert('成功添加' + res + '个账号', function () {
                                    layerParentClose();
                                    parent.window.location.reload();
                                })
                            } else {
                                layerAlert('添加失败');
                            }
                        },
                        error: function () {
                            layerAlert('发生系统错误,请与管理员联系！');
                        }
                    });
                } else {
                    that.$message.error('请填入原始id');
                }
            },
        }
    });
    vm.get_category();
    vm.get_list();
</script>
</html>